Vue.js中provide/inject的基本用法及数据响应式-组件通信

作者：管理员 2019-07-04 11:05:44 分类：Vue2.js专栏阅读（7373） 0

官方是这么解释的，provide / inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。其实这个东西，说通俗点，就是可以用来父辈们给祖孙传值，请看清楚，这里说的是可以隔代传值，传统的props只能父传子，不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，这就是它最大的特性。

基本语法

1 2	provide 选项应该是：一个对象或返回一个对象的函数 inject 选项应该是：一个字符串数组，或一个对象，对象的 key 是本地的绑定名

认真看清楚这两句话，然后来看下面示例。

父组件中提供

1
2
3
4
5
6

provide() {
return {
map_nodeObj: { map_node: this.obj }
// 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
}
},

子组件中引入

1
2
3
4
5
6
7
8

inject: {
map_nodeObj: {
default: () => {
return {map_node: '0'}
}
}
},
使用： this.map_nodeObj.map_node

上面inject就是对象，当然也可以是下面这样

1
2
3
4

inject: {
inject: ['map_nodeObj']
}
},

代码执行顺序

1
2
3
4
5

data
provide
created // 在这个阶段$el还未生成，在这先处理privide的逻辑，子孙组件才可以取到inject的值
mounted
...

数据响应式处理

你可能对于此方法如果数据响应式比较疑惑，网上关于provide 和 inject响应实例并不多，基本上都避而不详谈用官方一句话一笔带过：provide 和 inject 绑定并不是可响应的。这是刻意为之的，然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。其实很简单，我们就根据官方要求的来，只需要传入对象过去，并且对象是响应式的，定义在data或者计算属性里都行，如下：

parent父页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

export default {
provide() {
return {
foo: this.paramData // 传过去的必须是可监听的对象，注意，是对象，其他类型都不行
}
},
data() {
return {
paramData: {
data: 0
}
}
}
created() {
setTimeout(() => {
this.paramData.data++;
}, 1000)
},
}

child子页面：

1
2
3
4
5
6
7
8

export default {
inject: ['foo'],
data() {
return {
chilrfoo: this.foo.data
}
}
}

小结

这种方法也是有明显的缺点的，在任意层级都能访问导致数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了，因此这个属性通常并不建议使用能用vuex的使用vuex，不能用的多传参几层，但是在做组件库开发时，不对vuex进行依赖，且不知道用户使用环境的情况下可以很好的使用。官方着重说明provide 和 inject 主要为高阶插件/组件库提供用例，并不推荐直接用于应用程序代码中。

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(3) 打赏

标签：

Vue.js 组件开发

上一篇：一招快速获取github项目star的数量-超简单

下一篇：怎么保留Vue.js渲染模板时模板中的HTML注释